<template>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>

    <button @click="change">Change Message</button>
    <div ref="container" class="container">d</div>
</template>

<script>
export default {
    data() {
        return {
            message: "a"
        }
    },
    methods: {
        changeMessage() {
            this.message = "b";
        },
        change() {
            this.$refs.container.innerHTML = "c";
        }
    },
    watch: {
        // 数据变化时自动执行的方法
        message(newVal, oldVal) {
            console.log(newVal, oldVal);
        }
    }
}
</script>

<style lang="scss" scoped></style>